<template>
  <el-dropdown :hide-on-click="false" :trigger="trigger" class="layoutDropdown">
    <zy-button>{{dropdownTitle}}</zy-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="(item, index) in dropdownList" :key="index" v-if="item.isShow">
        <el-checkbox v-model="item.isSelected" @change="changeItem(item.name)"></el-checkbox>
        <span class="title">{{item.title}}</span>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
	export default {
		name: "layoutDropdown",
		props: {
			/**
			 * 下拉列表
			 * 示例参数：[{title: '', isSelected: true，isShow:true}]
			 */
			dropdownList: {
				type: Array,
				default: () => []
			},
			// 下拉按钮名称
			dropdownTitle: {
				type: String,
				default: () => '更多条件'
			},
			// 触发下拉方式  可选参数 'click' 'hover'
			trigger: {
				type: String,
				default: () => 'click'
			},
			minColumn: {
				type: Number,
				default: () => 2
			},
			isFilter: {
				type: Boolean,
				default: () => false
			},
			isOperating: {
				type: Boolean,
				default: () => false
			}
		},
		data() {
			return {
				changeItemName: ''
			};
		},
		computed: {},
		watch: {
			dropdownList: {
				handler(n, o) {
					let hideList = [];
					n.forEach(item => {
						if (!item.isSelected) {
							hideList.push(item.name)
						}
					});

					let minColumn = this.isFilter || !this.isOperating ? this.minColumn - 1 : this.minColumn;
					if (n.length - hideList.length === minColumn) {
						this.dropdownList.filter(item => {
							if (item.name === this.changeItemName) {
								item.isSelected = !item.isSelected;
							}
							return item;
						});
						this.$message.error(`最少展示${this.minColumn}${this.isFilter ? '个筛选条件' : '列数据'}`);
					} else {
						this.$emit('dropdownChange', hideList);
					}
				},
				deep: true
			}
		},
		components: {},
		methods: {
			changeItem(itemName) {
				this.changeItemName = itemName;
			}
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  @import "../../style/common/base.less";
  .el-dropdown-menu.el-popper {
    .el-checkbox {
      margin-right: 8px;

      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner, /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: @allPrimaryColor;
        border-color: @allPrimaryColor;
      }

    }
    /deep/ .el-dropdown-menu__item:focus,/deep/ .el-dropdown-menu__item:not(.is-disabled):hover{
      color: @allPrimaryColor;
    }
  }

</style>
